$break: "max-width: 800px";

@import "water";
@import "code";
@import "elements";
@import "nav";
@import "docnav";
@import "banner";
@import "resource";

:root {
    --pagefind-ui-scale: 0.8;

    --text: #000;
    --flip-text: #fff;
    --focus: #000;
    --highlight: #b65a09;
    --primary: #034AD8;
}

.search {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.column {
    flex: 1;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    flex-direction: row;
    padding-top: 40px;

    @media ($break) {
        flex-direction: column;
        padding-top: 20px;
        gap: 20px;
    }

    aside {
        max-width: 250px;
        min-width: 250px;
        flex: 1;

        @media ($break) {
            max-width: 100%;
        }
    }

    main {
        padding-left: 30px;
        flex: 3;
        overflow: hidden;

        @media ($break) {
            padding-left: 0;
            overflow: visible;
        }

        > :first-child {
            margin-top: 0;
        }
    }
}